<template>
	<div id="ordersdetail">
		<div class="top my-flex-between">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item class="hover" @click.native="goBack"><span style="color: #019cf5;">我的订单</span></el-breadcrumb-item>
				<el-breadcrumb-item>订单详情</el-breadcrumb-item>
			</el-breadcrumb>
			<div>
				<template v-if="(modelData.orderStatus=='wait_paid'||modelData.orderStatus=='completed'||modelData.orderStatus=='have_shipped' || modelData.orderStatus=='wait_received') && modelData.cancelStatus=='normal'">

					<div class="operateBtn my_flex_right" v-if="(modelData.orderStatus=='wait_paid'&&modelData.cancelStatus=='normal')||(modelData.orderStatus=='completed'&&modelData.cancelStatus=='normal')||(modelData.orderStatus=='wait_received'&&modelData.cancelStatus=='normal')">
						<template>
							<div class="cancelBtn my-btn" @click="cancelOrders" v-if="modelData.orderStatus=='wait_paid'&&modelData.cancelStatus=='normal'">
								取消订单
							</div>
						</template>

						<div class="deleteBtn my-btn" @click="orderDelete" v-if="modelData.orderStatus=='completed'&&modelData.cancelStatus=='normal'">删除订单</div>
						<div class="recievceBtn my-btn" @click="confirmReceipt" v-if="modelData.orderStatus=='wait_received'&&modelData.cancelStatus=='normal'">确认收货</div>
					</div>

				</template>
			</div>
		</div>
		<div class="order-info">
			<div class="address"><span>收货地址</span>
				<span>{{modelData.receiveName}}&#x3000;{{modelData.receiveTel}}&#x3000;{{modelData.receiveAddress}}</span></div>
			<!--<div class="detail">
				<div class="company">运货详情</div>
				<div class="types">
					<div class="name">{{modelData.traffickerName}}   <span>{{modelData.refundStatusCN}}</span></div>
					<div class="type">
						<span>油种:汽油</span>
						<span>油种:汽油</span>
						<span>油种:汽油</span>
						<span>油种:汽油</span>
						<span>油种:汽油</span>
					</div>
				</div>
			</div>-->
		</div>
		<div class="order_form">
			<template>
				<div class="table_list">
					<div class="top_title my-flex-between">
						<div class="left one-line my-flex-left">
							<img src="../../assets/centers/icon_store.png" />
							<span>{{modelData.traffickerName}}</span>
						</div>
						<div class="center my-flex-right">
							<span class="date">{{modelData.createDate}}</span>
							<span class="orderno">订单号：{{modelData.orderNo}}</span>
							<span class="status">{{modelData.orderStatusCN}}</span>
						</div>
						<!--<div class="right_order">
							<template v-if="type=='canceled'">
								{{item.cancelStatusCN}}
							</template>
							<template v-else>
								{{item.orderStatusCN}}
							</template>

						</div>-->
					</div>
					<el-table v-if="modelData.list" :data="modelData.list" :span-method="objectSpanMethod" border style="width: 100%">
						<el-table-column prop="productName">
							<template slot-scope="scope">
								{{scope.row.productName}}
							</template>
						</el-table-column>
						<el-table-column prop="">
							<template slot-scope="scope">
								{{scope.row.qty}}{{scope.row.unitIdCN}}
							</template>

						</el-table-column>
						<el-table-column width="210">
							<template slot-scope="scope">
								<el-button size="mini" @click.stop="downloadSignfile(scope.row.docUrl)">下载合同</el-button>
							</template>
						</el-table-column>
						<el-table-column prop="priceCN">
						</el-table-column>
						<el-table-column>
							预估运费：{{modelData.freightCharge}}
						</el-table-column>
						<el-table-column>
							实付 <span>
											{{modelData.realPriceCN}}
							</span>
						</el-table-column>
						
					</el-table>

				</div>
			</template>

		</div>

		<el-dialog id="cancelorder" title="填写订单取消原因" :visible.sync="cancelDiagShow">
			<div class="cancelReaseon">
				<el-form :model="cancelOrder" label-width="100px" class="demo-ruleForm">
					<el-form-item label="取消原因：" prop="applyReason">
						<el-input type="textarea" v-model="cancelOrder.applyReason"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="my-flex-right exdialog-footer">
				<el-button @click="cancelDiagShow=false">关闭</el-button>
				<el-button type="primary" @click="handleSave()">保存</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import service from '@/js/services/orderservice.js';
	
	export default {
		data() {
			return {
				modelData: {},
				cancelOrder: {
					businessId: 0,
					applyReason: ''
				},
				cancelDiagShow: false,
				id: null
			}
		},
		inject: ['closeLoading', 'hasPermission'],
		mounted() {
			if(this.$route.query.id) {
				this.id = this.$route.query.id;
				this.getOrderDetail();
			}

		},
		methods: {
			...service,
			cancelOrders() {
				this.cancelDiagShow = true;
				this.cancelOrder.applyReason = null;
				this.cancelOrder.businessId = this.modelData.id;
			},
			handleSave() {
				this.cancelApply();
			},
			confirmReceipt() {
				this.$confirm('您确认要收货吗？')
					.then(_ => {
						this.confirmReceipt_(this.id)
					})
					.catch(_ => {});

			},
			orderDelete() {
				this.$confirm('您确认要删除订单吗？')
					.then(_ => {
						this.orderDelete_(this.id)
					})
					.catch(_ => {});
			},
			async confirmReceipt_(id) {
				let params = {
					id: id
				};
				let res = await this.httptool.post(this.apis.confirmReceipt, params);
				this.$message.success('已确认收货!');
				this.getOrderDetail();

			},
			async orderDelete_(id) {
				let params = {
					id: id
				};
				let res = await this.httptool.post(this.apis.orderDelete, params);
				this.$message.success('删除成功!');
				this.$router.go(-1);
			},
			goBack() {
				this.$router.go(-1);
			},
			downloadSignfile(url) {
				window.location.href = url;
			},
			objectSpanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if(columnIndex === 4 || columnIndex === 5 || columnIndex === 6) {
					if(rowIndex % 2 === 0) {
						return {
							rowspan: 2,
							colspan: 1
						};
					} else {
						return {
							rowspan: 0,
							colspan: 0
						};
					}
				}
			},
		}
	}
</script>

<style lang="less" src="../../less/page/order/orderdetail.less"></style>